<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>音乐播放器</title>  
    <link rel="stylesheet" href="./style/music.css">
</head>  
<body>  
    <div class="player">
        <div class="player-box">
            <audio id="audio" controls style="display: none;">  
                <source src="./music/1951069525.mp3" type="audio/mpeg">  
                您的浏览器不支持 audio 元素。  
            </audio>
            <div class="music-image">
                <div>
                    <img src="./image/ab0c4e69-9679-40e0-abc4-b4268fb5e604.jfif" alt="精卫" srcset="" class="music-image-body">
                </div>
            </div>
            <div class="lyric">
                <span id="currentTime">00:00</span> / <span id="duration">00:00</span>
            </div>
            <div class="function-btn">
                <button class="lastBtn">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangyishou"></use>
                    </svg>
                </button> 
                <button id="playPauseBtn">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-24gf-pause2"></use>
                    </svg>
                </button>
                <button class="nextBtn">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiayishou"></use>
                    </svg>
                </button> 
            </div>
        </div>
        <div id="progress">  
            <input type="range" id="progressBar" min="0" max="100" value="0">  
        </div>  
    </div>  
    <script src="./icon/icons/iconfont.js"></script>
    <script>  
        // script.js  
        // script.js  
        document.addEventListener('DOMContentLoaded', function() {  
            var audio = document.getElementById('audio');  
            var progressBar = document.getElementById('progressBar');  
            var currentTime = document.getElementById('currentTime');  
            var duration = document.getElementById('duration');  
        
            // 更新进度条和时间的函数  
            function updateProgress() {  
                if (audio.duration) {  
                    var percent = (audio.currentTime / audio.duration) * 100;  
                    progressBar.value = percent;  
                    var currentMinutes = Math.floor(audio.currentTime / 60);  
                    var currentSeconds = Math.floor(audio.currentTime - currentMinutes * 60);  
                    var durationMinutes = Math.floor(audio.duration / 60);  
                    var durationSeconds = Math.floor(audio.duration - durationMinutes * 60);  
        
                    currentTime.textContent = pad(currentMinutes) + ':' + pad(currentSeconds);  
                    duration.textContent = pad(durationMinutes) + ':' + pad(durationSeconds);  
                }  
            }  
        
            // 填充数字以确保始终是两位数（例如：01, 02, ..., 09, 10）  
            function pad(number) {  
                return number < 10 ? '0' + number : number;  
            }  
        
            // 播放/暂停按钮点击事件  
            document.getElementById('playPauseBtn').addEventListener('click', function() {  
                if (audio.paused) {  
                    audio.play();  
                } else {  
                    audio.pause();  
                }  
            });  
        
            // 进度条滑块移动事件  
            progressBar.addEventListener('input', function() {  
                audio.currentTime = (this.value / 100) * audio.duration;  
            });  
        
            // 音频播放事件，用于更新进度和时间  
            audio.addEventListener('timeupdate', updateProgress);  
        
            // 音频加载元数据事件，用于获取总时间并初始化进度条  
            audio.addEventListener('loadedmetadata', function() {  
                updateProgress();  
            });  
        });
    </script>  
</body>  
</html>